<template>
    <div class="gDetail">
        <div class="g-tabs" :style="tabStyle">
            <Tab :text="tablist" @submit_toggle="getSection"></Tab>
        </div>
        <!--商品详情-->
        <div class="goods" id="goods">
            <div>
                <div class="swiper-container">
                    <div class="swiper-wrapper g-img">
                        <div class="swiper-slide" v-for="(img, index) in gItem.otherPaths" :key="index" v-if="index < 5">
                            <img :src="baseUrl + img" alt="activity">
                        </div>
                    </div>
                    <div class="swiper-pagination"></div>
                </div>

                <div class="goods-desc">
                    <p class="g-price"><span class="g-price-tag">零售价：￥</span>{{gItem.oriprice}}
                    </p>
                    <p class="g-title">{{gItem.name}}</p>
                </div>
            </div>
            <div class="g-detail">
                <p class="g-title">产品详情</p>
                <div class="g-info">
                    <img :src="baseUrl + item"  v-for="(item, index) in gItem.detailPaths"  />
                </div>
            </div>
        </div>

        <!-- 商品评价 -->
        <div class="comment" id="comment" :style="gComment && gComment.length > 0 ? 'min-height:100vh' : 'min-height:auto' ">
            <div class="g-detail">
                <p class="c-title" style="text-align: left">产品评价（{{gItem.evaluationCount}}）</p>
                <ul>
                    <li v-for="(comment, index) in gComment" :key="index">
                        <div class="c-user">
                            <img :src="comment.userPath">
                            <div>
                                <p class="nick-name">{{comment.userName}}</p>
                                <p>{{comment.createdTime}}</p>
                            </div>
                        </div>
                        <div class="c-content">
                            {{comment.detail}}
                        </div>
                        <div class="c-pics" v-for="(path, index) in comment.paths">
                            <img :src="baseUrl + path"/>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
        <div class="g-footer">
            <div class="return" @click="getPolicy">
                <img src=""/>
                <span>退换货政策</span>
            </div>
            <div class="btn" @click="bookOrder">预定下单</div>
        </div>
        <ShoppingCart v-if="showCart" :oricart="cart" @cancelBookOrder="cancelBookOrder"></ShoppingCart>
    </div>
</template>
<script>
  import Swiper from 'swiper'
  import base from '_common/services/base';
  import 'swiper/dist/css/swiper.min.css'
  import Tab from '_components/tab/tab'
  import ShoppingCart from '_components/shoppingCart/shoppingCart'
  import _ from 'underscore'
  import {getMemberInfo1} from '_common/services/user'
  import GoodsService from '_common/services/goods'
  import {getQuery} from '@/utils/utils'
  import {getCookie} from '@/utils/cookiesUtil.js'
  import {MessageBox} from 'element-ui'
  import wxLogin from '_common/wxLogin.js'
  export default {
    data () {
      return {
        agencyId: 1, // 用户等级
        baseUrl: base.test,
        goodsId: null,
        cart: {},
        gItem: {},
        gComment: [],
        currentIndex: 0, //当前选中的tab的下标
        scrollY: 0, // 页面滚动距离
        tablist: ['商品', '评价'],
        showCart: false
      }
    },
    created () {
    },
    async beforeMount() {
      await wxLogin(this.getData)
    },
    computed: {
      tabStyle () {
        this.scrollY = window.scrollY > 50
        if (this.scrollY) {
          return 'z-index:2;opacity:100;height:auto;position: fixed'
        }
        else {
          return 'z-index:-1;opacity:0;height:0;position: relative'
        }
      }
    },
    methods: {
        getData() {
            window.addEventListener('scroll', _.throttle(this.setScrollPosition, 100), false)
            this.goodsId = getQuery('goodsId')
                this.getGDetail()
        },
        getInfo () {
            getMemberInfo1().then(res => {
                if (res && res.code === 0) {
                    if (!res.data) {
                        this.$openRouter({
                            name: 'login'
                        })
                    }
                    else {
                      this.showCart = true
                      console.log(this.showCart)
                      this.agencyId = res.data.agencyId
                      this.agencyInfo = null
                      if (this.gItem) {
                        this.gItem.agencyOrderLimits.forEach((v, k) => {
                          if (v.agencyId === parseInt(this.agencyId)) {
                            this.agencyInfo = v
                            this.gItem.price = this.agencyInfo.goodsPrice
                          }
                        })
                        if (this.agencyInfo) {
                          this.cart = {
                            canOrder: res.data.canOrder,
                            goodsId: this.gItem.id,
                            price: this.gItem.price,
                            agencyInfo: this.agencyInfo,
                            lowestOrderCount: this.agencyInfo.lowestOrderCount,
                            goodsCount:  this.agencyInfo.lowestOrderCount,
                            name: this.gItem.name,
                            pic: this.gItem.thumbnailPaths ? this.baseUrl + this.gItem.thumbnailPaths[0] : ''
                          }
                        }
                      }
                    }
                }
                else {
                    this.$alertTip(res.msg || '获取失败请稍后再试')
                }
            }, reject => {
                this.$alertTip('获取失败请稍后再试')
            })
        },
      getPolicy () {
        MessageBox.alert('<p style="line-height: 1.5;">' + this.gItem.returnPolicy + '</p>', '退换货政策', {
          dangerouslyUseHTMLString: true
        });
      },
      getGDetail () {
        GoodsService.getGoodsDetail(this.goodsId).then(res=>{
          if (res && res.code === 0) {
            this.gItem = res.data
            this.gItem.oriprice = this.gItem.price
            this.$nextTick(() => {
                const mySwiper = new Swiper ('.swiper-container', {
                    loop: true, // 循环模式选项
                    autoplay: true,//可选选项，自动滑动
                    // 如果需要分页器
                    pagination: {
                        el: '.swiper-pagination',
                        clickable: true,
                    }
                })
            })
            this.getGComment()
          }
          else {
            this.$alertTip(res.msg || '遇到问题啦，请稍后刷新重试！')
          }
        }, reject => {})
      },
      getGComment (){
        GoodsService.getGoodsComment(this.goodsId).then(res => {
          if (res && res.code === 0) {
            this.gComment = res.data.data
          }
        }, reject => {})
      },
      setScrollPosition () {
        this.scrollY = window.scrollY > 50
      },
      getSection () {
        let argus = arguments && arguments.length > 0 ? arguments[0] : 0;
        this.currentIndex = argus;
        if (this.currentIndex == 0) {
          window.scrollTo(0, 0)
        }
        else {
          let scrolly = document.getElementById('comment').offsetTop
          window.scrollTo(0, scrolly)
        }
      },
      bookOrder () {
        this.getInfo()
      },
      cancelBookOrder () {
        this.showCart = false
      }
    },
    components: {
      Tab, ShoppingCart
    }
  }
</script>
<style lang="less" scoped>
    @import "../../css/common";
    .gDetail {
        background: #f8f8f8;
        padding-bottom: 100px;
        .g-tabs {
            opacity:0;
            z-index:-1;
            width: 100%;
            left: 0;
            top: 0;
            transition: all ease-in .5s;
        }
        .goods {
            .swiper-container{
                // height: 1125px;
                overflow: hidden;
            }
            .g-img {
                img {
                    width: 100%;
                    vertical-align: bottom;
                    &.router-link-exact-active {
                        color: @color;
                    }
                }
            }
            .goods-desc {
                padding-left: 30px;
                padding-top: 32px;
                padding-bottom: 32px;
                background: #fff;
                .g-price {
                    font-size: 48px;
                    margin-bottom: 24px;
                    color: #ff1515;
                    line-height: 1;
                    .g-price-tag {
                        font-size: 30px;
                    }
                    .original {
                        font-size: 24px;
                        color: #999;
                        margin-left: 17px;
                        text-decoration: line-through;
                    }
                }
                .g-title {
                    font-size: 36px;
                    line-height: 1.2;
                    color: #333;
                }
            }
        }
        .g-detail {
            margin-top: 20px;
            background: #fff;
            .g-title {
                font-size: 30px;
                color: #333;
                text-align: center;
                position: relative;
                line-height: 92px;
                &:before, &:after {
                    content: '';
                    position: absolute;
                    width: 72px;
                    height: 2px;
                    background-color: #eaeaea;
                    top: 50px;
                }
                &:before {
                    left: 5rem;
                }
                &:after {
                    right: 5rem;
                }
            }
            .g-info {
                padding: 32px;
                border-top: 1px solid #eaeaea;
                img {
                    width: 100% !important;
                }
            }
        }
        .comment {
            margin-top: 20px;
            .c-title{
                font-size: 1rem;
                color: #333;
                text-align: center;
                position: relative;
                line-height: 3.066667rem;
                padding-left: 32px;
            }
            ul {
                padding: 22px 32px;
                border-top: 1px solid #eee;
                background-color: #fff;
                li {
                    border-bottom: 2px solid #f3f3f3;
                    &:last-child{
                        border-bottom: none;
                    }
                    .c-user {
                        font-size: 24px;
                        color: #999;
                        margin: 24px 0;
                        .flex(start);
                        img {
                            width: 50px;
                            margin-right: 10px
                        }
                        .nick-name {
                            color: #333;
                        }
                    }
                    .c-content {
                        margin-bottom: 24px;
                        font-size: 26px;
                        color: #333;
                    }
                    .c-pics {
                        img {
                            width: 180px;
                            height: 180px;
                            margin-right: 20px;
                            margin-bottom: 32px;
                            &:last-child {
                                margin-right: 0;
                            }
                        }
                    }
                }
            }
        }
        .g-footer {
            padding-left: 24px;
            line-height: 100px;
            color: #f3a13a;
            background: #fff;
            position: fixed;
            bottom: 0;
            left: 0;
            width: 100%;
            z-index: 2;
            .flex(space-between);
            .return {
                .flex(start);
                span {
                    font-size: 24px;
                }
                img {
                    width: 42px;
                    margin-right: 10px;
                }
            }
            .btn {
                width: 320px;
                color: #fff;
                line-height: 100px;
                font-size: 30px;
                text-align: center;
                background-color: #f3a13a;
            }
        }
    }
</style>